<template>
	<view v-if="lists.length>0">
		<view class="card" v-for="(item,index) in lists" :key="index">
			<view class="title">
				{{item.valueName}}
			</view>
			<view class="list" v-for="(ite,inde) in item.values" :key="inde">
				<image :src="ite.icon" mode=""></image>
				<text>{{ite.valueName}}</text>
			</view>
		</view>
	</view>
	<view class="main dis" style="z-index: 9999;height: 80vh;" v-else>
		<view style="display: flex;align-items: center;justify-content: center;flex-direction: column;">
			<image src="https://hosue-omo.oss-cn-shenzhen.aliyuncs.com/assets/noData.png" mode="aspectFit" style="width: 200rpx;height: 200rpx;"></image>
			<text>暂无数据</text>
		</view>
	</view>
</template>

<script setup>
	import {
		ref,
		reactive,
		onMounted
	} from 'vue';
	import {
		allFacilities
	} from '@/pagesA/facilities/js/api.js'
	import {
		onLoad
	} from '@dcloudio/uni-app'
	const lists = ref([{
			valueName: '客厅配置',
			list: [{
					iconPath: '/pagesA/static/details/dianshi.svg',
					valueName: '电视'
				},
				{
					iconPath: '/pagesA/static/details/shafa.svg',
					valueName: '沙发'
				},
				{
					iconPath: '/pagesA/static/details/kongtiao.svg',
					valueName: '空调'
				},
				{
					iconPath: '/pagesA/static/details/wifi.svg',
					valueName: '无线Wi-Fi'
				}
			]
		},
		{
			valueName: '卧室配置',
			list: [{
					iconPath: '/pagesA/static/details/chuang.svg',
					valueName: '床'
				},
				{
					iconPath: '/pagesA/static/details/shuzhuo.svg',
					valueName: '书桌'
				},
				{
					iconPath: '/pagesA/static/details/kongtiao.svg',
					valueName: '空调'
				},
				{
					iconPath: '/pagesA/static/details/wifi.svg',
					valueName: '无线Wi-Fi'
				}
			]
		},
		{
			valueName: '厨房配置',
			list: [{
					iconPath: '/pagesA/static/details/bingxiang.svg',
					valueName: '冰箱'
				},
				{
					iconPath: '/pagesA/static/details/weibolu.svg',
					valueName: '微波炉'
				},
				{
					iconPath: '/pagesA/static/details/chouyanji.svg',
					valueName: '抽烟机'
				},
				{
					iconPath: '/pagesA/static/details/lanqizhao.svg',
					valueName: '燃气灶'
				}
			]
		}
	])
	onMounted(() => {

	})
	const getAllFacilities = async (id) => {
		let res = await allFacilities(id)
		lists.value = res.data.data
		console.log('dasfshs99999====', res)
	}
	onLoad((options) => {
		console.log(options, '页面携带')
		let houseId = options.id
		getAllFacilities(houseId)
	})
</script>

<style>
	page {
		background-color: #F6F6F6 !important;
	}
</style>
<style lang="less" scoped>
	.card {
		margin-top: 16rpx;
		padding: 30rpx 30rpx 0 30rpx;
		background: #FFFFFF;

		.title {
			font-family: PingFangSC-Semibold;
			font-size: 32rpx;
			color: #000000;
			line-height: 36rpx;
			font-weight: 600;
			margin-bottom: 10rpx;
		}

		.list {
			display: flex;
			align-items: center;
			border-bottom: 1rpx solid #EEEEEE;
			padding: 30rpx 0;

			image {
				height: 40rpx;
				width: 40rpx;
				margin-right: 18rpx;
			}

			text {
				font-family: PingFangSC-Regular;
				font-size: 26rpx;
				color: #000000;
				line-height: 32rpx;
				font-weight: 400;
			}
		}
	}
</style>